<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<!DOCTYPE html>

<html>
	<head>
	<%@ include file="/WEB-INF/views/include/common.jsp" %>
		<meta name="AUTHOR" content="QroTech Inc." />
		<title>큐로넷::위치관제시스템</title>
		
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<link rel="stylesheet" href="${cssUrl }/header-1.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/fancy_table.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/menu.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/table.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/button.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/secondmenu.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/Qronet_display_sub4.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl }/m-200.css" type="text/css" />
		<style>
		.highlighter{
		background-color:#FFFFCC
		}
		</style>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		
		<script src="${jsUrl }/pagenation.js"></script>
		
		<script src="${jsUrl }/m-200.js"></script>
		<script language="javascript">
		var _this = this;
		$(document).ready(function(){
		
			$("#periodCurDate").val(formatter.dateFormatYYYYMMDD(new Date()));
			$("#runSummary").hide();
			initBind();
		});
		
		// 각 바인딩할 객체들을 초기화 한다.
		function initBind(){
			
			$('#datepicker').bind('click', function(){
// 				logs($(this).val());
			});
		}
		
		/**
		* 기간 선택하는 탭이 변경되면 변경된 해당 id가 넘어 옴.
		*
		*
		**/
		function selectedDate1(obj){			
			$("#periodCurDate").val(obj);
			//운행기록 refresh
			curTabRefresh();
// 			logs(obj);
		}
		
		
		/**
		* 기간 선택하는 탭이 변경되면 변경된 해당 id가 넘어 옴.
		*
		*
		**/
		function selectedDate2(obj){
			$("#periodCurDate").val(obj);
		}
		
		/**
		* 일지선택 조회하고자하는 일지을 선택하세요.  탭이 변경되면 변경된 해당 id가 넘어 옴.
		*
		**/	
		function periodTabChangeEvent(objId){
			$("#basicInfo").show();
    		$("#runInfo").show();
    		$("#runSummary").show();
    		
    		changeTab();
			//일간 선택시 운행통계 숨김
			//주간, 월간 선택시 운행기록 숨김
			if(objId == "tabs-1") {
				$("#runSummary").hide();	
			} else if(objId == "tabs-2" || objId == "tabs-3") {
				$("#runInfo").hide();
			}
			$("#periodIndex").val(objId);
			
//			logs(objId);
		}
		/**
		* 차량 및 그룹 선택  탭이 변경되면 변경된 해당 id가 넘어 옴.
		*
		*
		**/		
		function groupTabChangeEvent(objId){
			$("#groupIndex").val(objId);			
// 			logs(objId);
		}
		
		function mainTabChangeEvent(objId){
			logs(objId);
		}
		
		
		function setCarCode(trObj){
			$('#tblCar tr').each(function(){
				$(this).removeClass('highlighter');
			});
			$(trObj).addClass('highlighter');
			$("#groupCarCode").val($(trObj).find("#carCode").val());
			
			//일간 탭이면 운행기록 새로고침
			if($("#periodIndex").val() == "tabs-1") {
				curTabRefresh();
			}
		}
		
		function setGroupCode(trObj){
			$('#tblGroup tr').each(function(){
				$(this).removeClass('highlighter');
			});
			$(trObj).addClass('highlighter');
			$("#groupCarGroupCode").val($(trObj).find("#carGroupCode").val());
			
			//일간 탭이면 운행기록 새로고침
			if($("#periodIndex").val() == "tabs-1") {
				curTabRefresh();
			}
		}
		
		function getMonth(value) {
			$("#periodSelectedMonth").val(value);
		}
// 		function setDeptCode(trObj){
// 			$('#tblDept tr').each(function(){
// 				$(this).removeClass('highlighter');
// 			});
// 			$(trObj).addClass('highlighter');
// 		}
		
		/**검색 조건 선택시 기본안내 탭으로 이동**/
		function changeTab() {
			$( "#tabs2" ).tabs( "option", "active", 0 );
		}
		
		/**현재 선택된 탭 refresh*/
		function curTabRefresh() {
			beginTab = $("#tabs2 ul li:eq(" + getSelectedTabIndex() +")").find("a");
			loadTabFrame($(beginTab).attr('href'), $(beginTab).attr('rel'));
		}
		</script>
    </head>
    <body>   
    <form name="paramForm" id="paramForm" style="display:none;">
		<input type="text" name="periodIndex" id="periodIndex" value="tabs-1" />
		<input type="text" name="periodCurDate" id="periodCurDate"/>
		<input type="text" name="periodSelectedMonth" id="periodSelectedMonth" value="0"/>
		<input type="text" name="groupIndex" id="groupIndex" value="tabs-bottom-1" />
		<input type="text" name="groupCarCode" id="groupCarCode" value=0 />
		<input type="text" name="groupCarGroupCode" id="groupCarGroupCode" value=0 />
	</form>	
    	<div class="headerContent">	
		<div class="pageHeader">
			<%@ include file="/WEB-INF/views/include/logoLink.jsp" %>
			<div id="pageNav">
				<ul>
					<%@ include file="/WEB-INF/views/include/mainNaviStyle2.jsp" %>
				</ul>
			</div>
			<div id="pageNavRight">
				<%@ include file="/WEB-INF/views/include/titleLink.jsp" %>
			</div>
		</div>
			<div class="header_line"></div>
		</div><!--header end-->	
		<div class="secondMenu" >
			<div id="menu">
				<ul>
					<li class="menu1"><a href="#" class="toggler" id="menu1">운행일지</a></li>
					<li class="menu2"><a href="m-410.html" class="toggler" id="menu2">관심지역통계</a></li>
				</ul>
			</div>
		</div><!-- second menu end -->
        
        	
		
		<div class="mainContent">	
			<div class="searchInfo">
					<ul>
						<li class= "locationInfo"><span>운행일지</span></li>
					</ul>
					<div class="last"><a onclick="javscript:openQuestionPopup('http://www.qronet.co.kr/help/qronet_help.html#MonitoringArea')"><img src="${imgUrl}/question_mark.png"/></a></div>
					
			</div><!-- searchInfo end -->	
	        <div class="m200">
	        	<div class="content">
	        		<div class="m200-left">
	        			<div class="m200-left-top">
	        				
		        			<li style="padding:10px 0;"><span class="m200-info-title">기간선택</span>  일지작성 기간을 선택하세요.</li>
			        		
			        		<div id="tabs" class="tabs">
							  <ul>
							    <li style="padding-top:5px;"><a href="#tabs-1" style="padding:4px 20px;">일간</a></li>
							    <li style="padding-top:5px;"><a href="#tabs-2" style="padding:4px 20px;">주간</a></li>
							    <li style="padding-top:5px;"><a href="#tabs-3" style="padding:4px 20px;">월간</a></li>
							    
							  </ul>
							  <div id="tabs-1" class="tabs-1">
							    <div>
							    	<p><strong>날짜:</strong> <input  type="text" id="alternate"/></p><br>
							    		<div id="datepicker" class="datepicker"></div>
							    </div>
							    
							 		<li><span>조회일을 선택하십시요.</span></li>
							  	
							  </div>
							  <div id="tabs-2" class="tabs-2">
							    <div><strong> 기간: </strong><input  type="text" id="currDate" size="17"/><br>
							    	<p style="margin-left:40px;">~ <input type="text" id="nxtDate"/></p>
									<div id="datepicker2" class="datepicker2"></div>
							    </div>
							 		<li><span>기준일로부터 7일간의 통계를 조회합니다.</span></li>
							  </div>
							  <div id="tabs-3" class="tabs-3">
							  	<li class="listnone" >
							  		<label class="font-black"><strong>조회월 :</strong></label>
							  		<select name="selectedMonth" onChange="getMonth(this.value)">
							  		<option value="1">1월</option>
							  		<option value="2">2월</option>
							  		<option value="3">3월</option>
							  		
							  	</select>
							  	</li>
							  	<li><span>최근 3개월까지 달을 선택할 수 있습니다.</span></li>
							  	<li><span>선택한 달의 운행 통계를 조회합니다.</span></li>
							  </div>	
		  					</div>
	        			</div>
	        			<div class="m200-left-bottom">
		        			<li ><span class="m200-info-title">차량 및 그룹 선택</span>  </li>
			        		<div id="tabs-bottom" class="tabs tabs-bottom-height">
							  <ul>
							    <li style="padding-top:5px;"><a href="#tabs-bottom-1" style="padding:4px 10px;">개별차량</a></li>
							    <li style="padding-top:5px;"><a href="#tabs-bottom-2" style="padding:4px 10px;">관리그룹</a></li>							    
							    <li style="padding-top:5px;"><a href="#tabs-bottom-4" style="padding:4px 10px;">전체</a></li>
							  </ul>
							  <div id="tabs-bottom-1">
							  		 <div class="tabs-bottom-table-wrap">
								  		 <div class="tabs-bottom-tableheader-wrap">
										    <table>
										    	<tr>
										    		<th>차량번호 (차량별칭, 운전자)</th>	
										    	</tr>
										    </table>
									    </div>
									    <div class="tabs-bottom-tablecontent-wrap">
										    <table id="tblCar">
										    	<tbody>
										    	<c:forEach items="${carList }" var="car" varStatus="status">
										    	<tr onclick="setCarCode(this);" style="cursor:pointer;">
										    		<td>${car.carRegiNumber } (${car.carName }, ${car.dri_Name })
										    			<input type="hidden" id="carCode" value="${car.carCode }"/>
										    		</td>
										    	</tr>
										    	</c:forEach>
										    	
										    	</tbody>
										    </table>
								   		 </div>
							   	 	</div><!--table wrapper-->
							  </div>
							  <div id="tabs-bottom-2" class="">
							    <div class="tabs-bottom-table-wrap">
								  		 <div class="tabs-bottom-tableheader-wrap">
										    <table>
										    	<tr>
										    		<th>관리그룹명(댓수)</th>	
										    	</tr>
										    </table>
									    </div>
									    <div class="tabs-bottom-tablecontent-wrap">
										    <table id="tblGroup">
										    	<c:forEach items="${groupList }" var="group" varStatus="status">
										    	<tr onclick="setGroupCode(this);" style="cursor:pointer;">
										    		<td>${group.groupName } (${group.cnt }대)
										    			<input type="hidden" id="carGroupCode" value="${group.carGroupCode }"/>
										    		</td>
										    	</tr>
										    	</c:forEach>
										  	</table>
								   		 </div>
							   	 	</div><!--table wrapper-->
							  </div>							  
							  <div id="tabs-bottom-4">
							  	<p><strong>전체차량  :</strong> <c:out value="${fn:length(carList)}" />대</p>							  	
							  	<p><strong>관리그룹  :</strong> <c:out value="${fn:length(groupList)}" />개</p>
							  	<li><span>전체차량에 대해서 운행 통계를 조회합니다.</span></li>
							  </div>	
		  					</div>
	        			</div>
	        		</div><!--left-->
	        	<div class="m200-right">
	        		
	        		<li style="padding:10px 0;"><span class="m200-info-title">일지선택</span>  조회하고자하는 일지을 선택하세요.</li>
	        		
	        		<div id="tabs2" class="tabs2">
						  <ul>
						    <li id="basicInfo" style="padding-top:5px;"><a class="tabref" href="#tabs2-1" rel="/report/basicInfo" style="padding:4px 20px;">기본안내</a></li>
						    <li id="runInfo" style="padding-top:5px;"><a class="tabref" href="#tabs2-2" rel="/report/runInfo" style="padding:4px 20px;">운행기록</a></li>
						    <li id="runSummary" style="padding-top:5px;"><a class="tabref" href="#tabs2-3" rel="http://www.jquery.com" style="padding:4px 20px;">운행통계</a></li>
						  </ul>
						  
						  	<div id="tabs2-1" class="tabMain ui-tabs-panel">
				            </div>
				            <div id="tabs2-2" class="tabMain ui-tabs-panel">
				            </div>
				            <div id="tabs2-3" class="tabMain ui-tabs-panel">
				            </div>
				            <div id="tabs2-4" class="tabMain">
				            </div>
				            <div id="tabs2-5" class="tabMain">
				            </div>
				            <div id="tabs2-6" class="tabMain">
				            </div>
				            <div id="tabs2-7" class="tabMain">
				            </div>
					
	        		</div>
	        	</div>
	        </div><!--content-->	
	      </div><!--m200-->	
       	</div> <!-- mainContent end -->
		
		<div class="chart_footer">
		    <div class="footerCenter">
		       <span>Copyright ⓒ 2013 Qrotech Co.,Ltd. All rights reserved.</span>
		    </div>
	 </div>	<!-- footer end-->	
  </body>
</html>
